<template>
  <v-col cols="12" md="4">
    <v-card>
      <v-card-title>作答</v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12">
            <v-text-field
              placeholder="请输入答案"
              label="作答区"
              outlined
              v-model="answerStr"
              :readonly="isOver"
              @update:error="onUpdateError"
              :rules="gameState.AnswerChecker.Validate({ Answer: answerStr })"
            ></v-text-field>
          </v-col>
          <v-col cols="12">
            <v-text-field
              placeholder="结果显示"
              label="结果"
              solo
              readonly
              v-model="response.Message"
            >
            </v-text-field>
          </v-col>
          <v-col cols="12" md="4">
            <v-btn
              class="primary"
              @click="onSubmit"
              :disabled="hasError || isOver || answerStr === ''"
            >
              提交
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-col>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Get, Sync } from "vuex-pathify";
import { ICheckResponse } from "@/model/CheckResponse";
import { INumGameState } from "@/model/NumGameState";
import { IHistory } from "@/model/History";

@Component({})
export default class OperatingSpace extends Vue {
  // region Prop
  // endregion
  // region Data
  response: ICheckResponse = {
    Message: "",
    IsRight: false
  };
  hasError = false;
  // endregion
  // region computed
  @Sync("NumGameState@Answer.Answer") answerStr!: string;
  @Get("NumGameState") gameState!: INumGameState;
  @Get("NumGameState@HistoryID") historyID!: string;
  @Sync("NumGameState@Histories") histories!: IHistory[];

  get isOver(): boolean {
    return this.histories.length >= 8 || this.response.IsRight;
  }
  // endregion
  // region watch
  // endregion
  // region method
  onUpdateError(val: boolean) {
    this.hasError = val;
  }

  onSubmit() {
    const question = this.gameState.Question;
    const answer = this.gameState.Answer;
    const answerChecker = this.gameState.AnswerChecker;

    this.response = answerChecker.Check(question, answer);
    this.histories = [
      ...this.histories,
      { Answer: { ...answer }, Response: { ...this.response } }
    ];

    this.$axios
      .put("api/HistoryInfos", {
        data: {
          ID: this.historyID,
          Histories: this.histories
        }
      })
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  }
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
